@import "common";

body{display: none;}

.main{
  height: 100%;box-sizing: border-box;padding-top: 600/@rem;background: url("/src/img/slogan/bg.jpg") no-repeat top center / cover;position: relative;
  .big-pic{margin: 0 30/@rem 0 70/@rem;padding-top: 60/@rem;}
  .btn-join{margin: 30/@rem 180/@rem 0;}
  .explain{margin-top: 40/@rem;text-align: center;
    a{font-size: 24/@rem;color: #fff;position: relative;line-height: normal;
      &.say{margin-right: 40/@rem;}
      i{display:inline-block;margin-left: 5/@rem;right: 0;top: 10/@rem;vertical-align: 1/@rem;width: 0;height: 0;border: 8/@rem solid transparent;border-left-color: #fff;}


    }
  }
  .foot{position: absolute;width: 100%;max-width: @sreen;text-align: center;color: rgba(255,255,255,0.8);font-size: 24/@rem;bottom: 30/@rem;
    img{display: inline-block;height: 30/@rem;margin-left: 10/@rem;}
  }
}

.box{
  position: absolute;top: 0;width: 100%;max-width: @sreen;background-color: rgba(0,0,0,0.8);bottom: 0;
}

.box-explain{
  .content{
    position: absolute;color: #fff;left: 50/@rem;right: 50/@rem;padding: 30/@rem 40/@rem 50/@rem;box-sizing: border-box;top: 10%;border-radius: 6px;background: url("/src/img/slogan/box-bg.jpg") top left / cover no-repeat;
    .tit{font-size: 36/@rem;font-weight: bold;text-align: center;}
    .cont{margin-top: 20/@rem;font-size: 28/@rem;text-align: justify;}
    .close{width: 80/@rem;height: 80/@rem;position: absolute;bottom: -120/@rem;left: 50%;margin-left: -40/@rem;border-radius: 100%;}
  }
}

.box-sign{
  background: url("/src/img/slogan/box-bg.jpg") top left / cover no-repeat;overflow: auto;position: fixed;-webkit-overflow-scrolling: touch;
  .title{width: 270/@rem;margin: 0 auto;padding-top: 60/@rem;}
  .close{position: absolute;right: 30/@rem;top: 30/@rem;width: 80/@rem;height: 80/@rem;border-radius: 100%;z-index: 10;}
  #form{
    display: block;padding: 0 55/@rem;margin-top: 50/@rem;
    .item{margin-top: 20/@rem;
      input{height: 90/@rem;border-radius: 4px;border: none;width: 100%;box-sizing: border-box;padding: 0 24/@rem;font-size: 30/@rem;line-height: 36/@rem;
        &::placeholder{line-height: 38/@rem;color: #888;}
      }
    }
    .group{
      margin-top: 20/@rem;border-radius: 4px;overflow: hidden;position: relative;
      textarea{
        width: 100%;box-sizing: border-box;resize: none;padding: 24/@rem;font-size: 30/@rem;height: 200/@rem;border: none;border-radius: 0;display: block;
        &:first-child{border-bottom: 1px solid #ccc;}
      }
      .hide{position: absolute;right: 10/@rem;top: 10/@rem;width: 40/@rem;height: 40/@rem;text-align: center;color: #666;font-size: 30/@rem;line-height: 34/@rem;}
      .add{height: 50/@rem;text-align: center;background-color:#a46886;line-height: 50/@rem;font-size: 22/@rem;color: #fff;display: block;}
    }
    .btn{background-color: #2493d2;margin: 70/@rem 0;height: 90/@rem;font-size: 36/@rem;border: none;border-radius: 4px;display: block;width: 100%;color: #fff;}
  }
}

.box-success{
  background-color: #fff;
  .icon{
    padding-top: 200/@rem;text-align: center;
    img{width: 160/@rem;}
  }
  .title{text-align: center;font-size: 48/@rem;margin-top: 20/@rem;}
  .cont{font-size: 28/@rem;color: #666;text-align: center;line-height: 50/@rem;margin-top: 30/@rem;}
  .link{
    margin-top: 80/@rem;font-size: 24/@rem;color: #666;text-align: center;
    span{color: #f30000;font-size: 36/@rem;}
    a{color: #4f77ad;}
  }
}